<template>
  <view>
    <navigator :url="'/pages/index/projectInfo?id=' + i.id" open-type="navigate" v-for='i in data'>
      <!-- <projectList /> -->

      <view class="m-projectList">
        <!-- <image src="i.logo" class="u-companyImg" /> -->
        <view class="u-companyMsg">
          <p class="u-companyName">
            {{i.title}}
          </p>
          <p class="u-tags">
            <text v-for='j in i.tags'>{{j}}</text>
          </p>
          <p class="u-companyInfo" v-show="i.celebrity_judge!=''">
            大咖点评：
          </p>
          <p class="u-companyInfo">
            {{i.celebrity_judge}}
          </p>
          <p class="u-companyInfo">
            项目需求：<span>{{i.requirement}}</span>
          </p>
        </view>
      </view>
    </navigator>
  </view>
</template>

<script lang="ts">
  import Vue from "vue";
  export default Vue.extend({
    name: "projectList",
    props: ['data'],
    data() {
      return {
        newsData: [],
      };

    },
    mounted() {

    },
    onLoad() { },
    methods: {}
  });
</script>

<style lang="scss">
  .m-projectList {
    overflow: hidden;
    background: url("../static/projectBg.jpg");
    background-size: 100% 100%;
    border-radius: 30upx;
    padding: 25upx;
    box-sizing: border-box;
  }

  .u-companyImg {
    float: left;
    width: 154upx;
    height: 95upx;
  }

  .u-companyMsg {
    float: left;
    margin-left: 20upx;
    /* width: 450upx; */
    margin-bottom: 15upx;
  }

  .u-companyName {
    color: #e2e2e2;
    font-size: 28upx;
  }

  .u-tags {
    margin-top: 15upx;

    text {
      display: inline-block;
      padding: 8upx;
      background: #edac36;
      margin-right: 10px;
      color: #000;
      margin-bottom: 20upx;
      font-size: 16upx;
      border-radius: 10upx;
    }
  }

  .u-companyInfo {
    margin-top: 18upx;
    color: #8d8d8d;
    font-size: 22upx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;

    span {
      color: #edac36;
    }
  }
</style>